<template>
    <div>
        <h3>房型列表</h3>
        <input type="text" v-model="can.name">
        <input type="button" value="查询" class="btn btn-primary" @click="show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>单价（元）</td>
                    <td>室内面积（平方米）</td>
                    <td>最多入住人数</td>
                    <td>图片</td>
                    <td>房型描述</td>
                    <td>是否有窗</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{item.HouseName  }}</td>
                    <td>{{item.Price  }}</td>
                    <td>{{item.Aera  }}</td>
                    <td>{{item.Count  }}</td>
                    <td><img :src="item.Photo" width="150" height="100"></td>
                    <td>{{item.Desc  }}</td>
                    <td>{{item.IsWindow==1?"有窗":"无窗"  }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="修改" class="btn btn-primary" @click="upd(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共<b>{{ data.totalCount }}</b>条</span>
        <span>每页<b>{{ can.pageSize }}</b>条</span>
        <span>共<b> {{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>

        <input type="button" value="首页" @click="gopage(1)" class="btn btn-link">
        <input type="button" value="上一页" @click="gopage(can.pageIndex-1)" class="btn btn-link">
        
        <span v-for="item in data.totalPage" @click="gopage(item)">{{ item }}</span>

        <input type="button" value="下一页" @click="gopage(can.pageIndex+1)" class="btn btn-link">
        <input type="button" value="尾页" @click="gopage(data.totalPage)" class="btn btn-link">

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();

let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0

})
let can:any=reactive({
    pageIndex:1,
    pageSize:2,
    name:""
})

onMounted(()=>{
    getList();
})
//删除
const del=(id:any)=>{
    if(confirm('确定删除吗')){
        axios({
            method:"delete",
            url:"/api/House/Del",
            params:{
                id:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                getList();
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}
//修改
const upd=(id:any)=>{
    router.push({
        path:"/HouseTypeUpd",
        query:{
            id:id
        }
    })
}

//查询
const show=()=>{
    can.pageIndex=1;
    getList();
}
//翻页
const gopage=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>data.totalPage){
        can.pageIndex=data.totalPage
        return;
    }
    can.pageIndex=num;
    getList();

}
//显示
const getList=()=>{
    axios({
        method:"get",
        url:"/api/House/HouseTypeShow",
        params:can
    })
    .then(res=>{
        data.list=res.data.list,
        data.totalCount=res.data.totalCount,
        data.totalPage=res.data.totalPage
    })
}


</script>

<style scoped>
b{
color: red;
}
input{
    margin: 0 7px;
}
span{
    margin: 0 7px;
}
</style>